<template>
  <div style="height: 100%; width: 100%; background-color: black">
    <div class="body" ref="appRef">
      <div class="header">
        <h1>
          衡德集团智能化工厂生产监测平台
          <!-- <span style="font-size: 22px">{{ $store.getters.isWuHan ? '(武汉工厂)' : '(荆州工厂)' }}</span> -->
        </h1>
        <div class="showTime">
          <span>{{ date }}</span>
        </div>
        <img
          style="position: absolute; left: 22px; top: 32px; display: inline-block; width: auto; height: 38px"
          src="../../../assets/images/favorite3_white.png" />
        <div style="position: fixed; right: 7px; top: 16px; cursor: pointer; color: lightgray" @click="close">
          <Icon type="md-close" size="32" />
        </div>
      </div>

      <div class="mainbox" style="display: flex; margin-top: 15px; gap: 40px">
        <div>
          <box1 title="基本概况">
            <div>
              <div class="bigbox">
                <el-carousel :interval="4000" style="width: 420px">
                  <el-carousel-item v-for="item in boardConfig.companyImg" :key="item">
                    <img :src="item" style="width: 420px; height: 275px" />
                  </el-carousel-item>
                </el-carousel>
                <!-- <img src="../../../assets/images/board/hdsy.png" style="width: 420px; height: 275px" alt="衡德" /> -->
                <div style="display: flex; flex-direction: column; align-items: center">
                  <i-circle :percent="form.companyOverview.completeRate" :stroke-color="sortColors" :trail-width="8" :stroke-width="9">
                    <span class="demo-circle-inner" style="font-size: 20px; color: yellow">{{ form.companyOverview.completeRate }}%</span>
                    <div class="demo-circle-inner" style="font-size: 16px; color: yellow">目标完成率</div>
                  </i-circle>
                  <div style="color: rgb(255, 255, 255); font-size: 16px; border: 1px solid #43c8cd; width: 220px; padding: 5px; margin-top: 10px">
                    <div>公司简介：</div>
                    <div>
                      具有较强的技术研发能力，极具服务意识，并且自身已深耕生产制造行业30余年，对行业创新具有敏锐的观察力，更兼具较强的发展潜力和市场竞争力
                    </div>
                  </div>
                </div>
                <div style="color: #fff; display: flex; flex-direction: column; justify-content: space-around">
                  <!-- <div class="infobox">
                    <div>
                      <span class="number">{{ (form.companyOverview.productionNumber / 10000).toFixed(0) }}</span>
                      万元
                    </div>
                    <div>累计销量</div>
                  </div> -->
                  <div class="infobox">
                    <div>
                      <span class="number">{{ (form.companyOverview.productionNumber / 10000).toFixed(0) }}</span>
                      万件
                    </div>
                    <div>累计产量</div>
                  </div>
                  <div class="infobox">
                    <div>
                      <span class="number">{{ boardConfig.companyPeoNum }}</span>
                      人
                    </div>
                    <div>技术人员</div>
                  </div>
                  <!-- <div class="infobox">
                    <div>
                      <span class="number">{{ 1000 }}</span>
                      余家
                    </div>
                    <div>累计客户</div>
                  </div> -->
                  <div class="infobox">
                    <div>
                      <span class="number">{{ 2000 }}</span>
                      余种
                    </div>
                    <div>产品种类</div>
                  </div>
                </div>
              </div>
            </div>
          </box1>
          <div style="display: flex; gap: 40px; margin-top: 10px">
            <box1 title="产品展示" style="flex: 1 1 100%">
              <!-- <el-carousel :interval="4000" type="card" height="200px">
                <el-carousel-item v-for="item in listImgPro" :key="item">
                  <img :src="item" style="width: 100%; height: 100%" alt="客户" />
                </el-carousel-item>
              </el-carousel> -->
              <scroll-seamless :data="boardConfig.proImg" :class-option="optionHover" class="seamless">
                <div style="display: flex">
                  <div v-for="(item, index) in boardConfig.proImg" :key="index" style="margin-right: 30px">
                    <img :src="item" />
                  </div>
                </div>
              </scroll-seamless>
            </box1>
          </div>

          <box1 title="实时生产进度">
            <dv-scroll-board :config="moeList" style="width: 100%; height: 360px" />
          </box1>
        </div>
        <div style="flex: 1 1 40%">
          <box1 title="产能分析">
            <div style="width: 100%; height: 120px">
              <div class="bigbox">
                <div class="flex-row">
                  <div class="orangebox">
                    今日计划:
                    <div class="digital-flop">
                      <dv-digital-flop :config="configTotalNumber" style="width: 150px; height: 40px" />
                      <div class="unit">件</div>
                    </div>
                  </div>
                  <div class="orangebox">
                    实时产量:
                    <div class="digital-flop">
                      <dv-digital-flop :config="configNowNumber" style="width: 150px; height: 40px" />
                      <div class="unit">件</div>
                    </div>
                  </div>
                </div>
                <div style="display: flex; align-items: center">
                  <i-circle :percent="form2.percent" :stroke-color="sortColors" :trail-width="8" :stroke-width="9">
                    <span class="demo-circle-inner" style="font-size: 20px; color: yellow">{{ form2.percent }}%</span>
                    <div class="demo-circle-inner" style="font-size: 16px; color: yellow">实时生产进度</div>
                  </i-circle>
                </div>
              </div>
            </div>
          </box1>
          <box1 title="机台状态分析">
            <div style="width: 100%; height: 120px">
              <div class="bigbox">
                <div class="flex-row">
                  <div class="orangebox">
                    注塑机台:
                    <div class="digital-flop">
                      <dv-digital-flop :config="configTotalMachine" style="width: 150px; height: 40px" />
                      <div class="unit">台</div>
                    </div>
                  </div>
                  <div class="orangebox">
                    实时开机:
                    <div class="digital-flop">
                      <dv-digital-flop :config="configOpenMachine" style="width: 150px; height: 40px" />
                      <div class="unit">台</div>
                    </div>
                  </div>
                </div>
                <div style="display: flex; align-items: center">
                  <i-circle :percent="(form.machineStatus.openRate * 100).toFixed(2)" :stroke-color="sortColors" :trail-width="8" :stroke-width="9">
                    <span class="demo-circle-inner" style="font-size: 20px; color: orange">
                      {{ (form.machineStatus.openRate * 100).toFixed(2) }}%
                    </span>
                    <div class="demo-circle-inner" style="font-size: 16px; color: orange">实时开机率</div>
                  </i-circle>
                </div>
              </div>
            </div>
          </box1>
          <box1 title="设备监控">
            <div>
              <div class="boxjt">
                <div class="title">空压机运行状态</div>
                <div class="flex-row">
                  <div class="icons-jt">
                    <svg-icon icon-class="空压机" class-name="空压机" style="width: 100px; height: 100px" />
                    <div class="ellipse-background"></div>
                  </div>
                  <div class="content">
                    累计运行时间: {{ pythonData.air.runTime }} 小时
                    <br />
                    主机累计用电: {{ pythonData.air.totalPower }} KWH
                    <br />
                    实时排气压力: {{ pythonData.air.pqyl }} MPa
                    <br />
                    实时排气温度: {{ pythonData.air.pqwd }} ℃
                  </div>
                </div>
              </div>
              <div class="boxjt">
                <div class="title">冰机运行状态</div>
                <div class="flex-row">
                  <div class="icons-jt">
                    <svg-icon icon-class="冰机" class-name="冰机" style="width: 100px; height: 100px" />
                    <div class="ellipse-background"></div>
                  </div>
                  <div class="content">
                    累计运行时间: {{ pythonData.ice.runTime }} 小时
                    <br />
                    预设空调目标: {{ pythonData.ice.yswd }} ℃
                    <br />
                    实时空调温度: {{ pythonData.ice.sswd }} ℃
                    <br />
                    回水温:{{ pythonData.ice.hsw }}℃ &emsp; &emsp;出水温:{{ pythonData.ice.csw }}℃
                  </div>
                </div>
              </div>
              <div class="boxjt">
                <div class="title">余热回收机运行状态</div>
                <div class="flex-row">
                  <div class="icons-jt">
                    <svg-icon icon-class="余热回收机" class-name="余热回收机" style="width: 100px; height: 100px; top: 20px" />
                    <div class="ellipse-background"></div>
                  </div>
                  <div class="content">
                    累计运行时间: {{ pythonData.heat.runTime }} 小时
                    <br />
                    累计节省电量: {{ pythonData.heat.totalPower }} 度
                    <br />
                    进油温:{{ pythonData.heat.jyw }}℃ &emsp; &emsp;出油温:{{ pythonData.heat.cyw }}℃
                    <br />
                    进水温:{{ pythonData.heat.jsw }}℃ &emsp; &emsp;出水温:{{ pythonData.heat.csw }}℃
                  </div>
                </div>
              </div>
            </div>
          </box1>
        </div>
        <div>
          <box1 title="实时生产趋势分析">
            <div style="width: 100%; height: 260px">
              <v-chart :options="option" style="width: 450px; height: 260px" />
            </div>
          </box1>
          <box1 title="工单首检异常监测">
            <div style="width: 100%; height: 260px; margin-bottom: 20px">
              <dv-scroll-board :config="orderInspection" style="width: 450px; height: 260px" />
            </div>
          </box1>

          <box1 title="原材料采购合格率排行">
            <dv-scroll-board :config="supplierRanking" style="width: 450px; height: 260px" />
          </box1>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import draw from '@/mixins/drawMixin'
import box1 from '../box1' // 引入box1组件的代码，确保路径正确。
// import BoardService from '@/api/board/board'
import PythonService from '@/api/python/python'
// PythonService.baseUrl = '/proxy_python_wh/'
import baseService from '@/api/board_big/boardBig'
const sortColors = ['red', 'orange', 'yellow', 'blue', 'green']
const fnNumber = (n, t) => {
  return {
    number: [n],
    // toFixed: 2,
    content: `{nt}`,
    textAlign: 'right',
    style: {
      fill: '#f46827',
      fontWeight: 'bold',
    },
  }
}
export default {
  name: 'BoardBig',
  mixins: [draw],
  components: { box1 },
  data() {
    return {
      date: '',
      sortColors: sortColors,

      source2: [
        { year: null, month: '04月', number: 100, percent: null },
        { year: null, month: '05月', number: 115, percent: null },
        { year: null, month: '06月', number: 123, percent: null },
        { year: null, month: '07月', number: 90, percent: null },
        { year: null, month: '08月', number: 130, percent: null },
        { year: null, month: '09月', number: 111, percent: null },
      ],
      form: {
        companyOverview: {},
        machineStatus: {},
        supplierRanking: [],
      },
      form2: {
        productionTrendAnalysis: {},
        dateMessageList: [[], []],
        moeDetList: [],
      },
      form3: {
        monthlySalesRanking: [],
        salesTrendAnalysis: [],
      },
      boardConfig: {
        proImg: [],
        companyImg: '',
      },
      pythonData: {
        air: {
          runTime: 0,
          totalPower: 0,
          pqyl: 0,
          pqwd: 0,
        },
        ice: {
          runTime: 0,
          mbwd: 0,
          sswd: 0,
          hsw: 0,
          csw: 0,
        },
        heat: {
          runTime: 0,
          totalPower: 0,
          jyw: 0,
          cyw: 0,
          jsw: 0,
          csw: 0,
        },
      },
      configNowNumber: { number: [0] },
      configTotalNumber: {},
      configTotalMachine: {},
      configOpenMachine: {},
    }
  },
  created() {
    this.listByConfigKey('cus.board').then((res) => {
      this.boardConfig = res.data
      this.boardConfig.companyImg = this.boardConfig.companyImg.split(',').map((item) => process.env.VUE_APP_BASE_API + item)
      this.boardConfig.proImg = this.boardConfig.proImg.split(',').map((item) => process.env.VUE_APP_BASE_API + item)
    })
    if (!this.$store.getters.isWuHan) PythonService.baseUrl = '/proxy_python_wh/'
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.creatIntvers()
      // 通过 `vm` 访问组件实例
    })
  },
  beforeRouteLeave(to, from, next) {
    if (this.timer) clearInterval(this.timer)
    if (this.timer30) clearInterval(this.timer30)
    if (this.timer3) clearInterval(this.timer3)
    next()
  },
  computed: {
    option() {
      return {
        backgroundColor: 'rgba(62, 111, 146,0.5)',
        textStyle: {
          color: '#fff',
        },
        color: ['#00c1de', '#ff9d00', '#ff0000'],
        legend: {
          show: true,
          right: '10px',
          textStyle: {
            color: '#fff',
          },
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255,1)',
            },
          },
          data: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7', 'H8'],
        },
        yAxis: {
          type: 'value',
          name: '件',
          nameTextStyle: {
            color: 'rgba(255,255,255,1)',
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255,1)',
            },
          },
        },
        // tooltip: {
        //   trigger: 'axis',
        //   formatter: function (params) {
        //     return params[0].axisValueLabel + '<br />' + params[0].marker + params[0].seriesName + ': ' + params[0].value.number + '件'
        //   },
        // },
        grid: {
          top: '15%',
          left: '3%',
          right: '4%',
          bottom: '2%',
          containLabel: true,
        },
        series: [
          {
            name: '计划数',
            type: 'bar',
            barWidth: '25%',
            //dimensions: ['name', 'number'],
            data: this.form2.dateMessageList[1],
            // lineStyle: {
            //   color: '#2de9db',
            // },
            // itemStyle: {
            //   color: {
            //     type: 'linearGradient',
            //     x: 0,
            //     y: 0,
            //     x2: 0,
            //     y2: 1,
            //     colorStops: [
            //       { offset: 0, color: '#01D7FA' },
            //       { offset: 1, color: '#0078C9' },
            //     ],
            //   },
            // },
            // areaStyle: {
            //   color: '#2E7DA1',
            // },
          },
          {
            name: '生产数',
            type: 'bar',
            barWidth: '25%',
            data: this.form2.dateMessageList[0],
            lineStyle: {
              color: '#2de9db',
            },
            // itemStyle: {
            //   color: {
            //     type: 'linearGradient',
            //     x: 0,
            //     y: 0,
            //     x2: 0,
            //     y2: 1,
            //     colorStops: [
            //       { offset: 0, color: '#01D7FA' },
            //       { offset: 1, color: '#0078C9' },
            //     ],
            //   },
            // },
            // areaStyle: {
            //   color: '#2E7DA1',
            // },
          },
        ],
      }
    },
    orderInspection() {
      return {
        headerBGC: 'rgba(76,46,235,0.8)',
        oddRowBGC: 'rgba(15, 40, 80, 0.8)',
        evenRowBGC: 'rgba(15, 40, 80, 0.8)',
        align: ['center', 'center', 'center', 'center'],
        headerHeight: 40,
        index: true,
        columnWidth: [50, 80, 200, 90, 90],

        header: [
          '<span style="font-size:14px;">机台号</span>',
          '<span style="font-size:14px;">品名规格</span>',
          '<span style="font-size:14px;">异常原因</span>',
          '<span style="font-size:14px;">处理进度</span>',
        ],
        data: this.form.orderInspection,
      }
    },
    supplierRanking() {
      return {
        headerBGC: 'rgba(76,46,235,0.8)',
        oddRowBGC: 'rgba(15, 40, 80, 0.8)',
        evenRowBGC: 'rgba(15, 40, 80, 0.8)',
        align: ['center', 'center', 'center', 'center'],
        headerHeight: 40,
        index: true,
        columnWidth: [50, 170, 90, 90, 90],

        header: [
          '<span style="font-size:14px;">产品名称</span>',
          '<span style="font-size:14px;">送货数</span>',
          '<span style="font-size:14px;">合格数</span>',
          '<span style="font-size:14px;">合格率</span>',
        ],
        data: this.form.supplierRanking,
      }
    },
    moeList() {
      // this.form2.moeDetList = [
      //   ['2024090200055', 'A260-1', '低排水管弯管0070206044,ABS,白色', 30000, 39228, '67.28%'],
      //   ['2024091300021', 'C250-1', '护圈001A1433307,PP中熔指,白色,自配', 30000, 9096, '30.32%'],
      //   ['2024091400020', 'C250-4', '排水弯管0070208187,PP,白色', 30000, 148, '0.49%'],
      //   ['2024090900036', 'C470-1', 'A0969-148风道前板12131000077568,PP,白色', 10000, 4697, '46.97%'],
      //   ['2024090100162', 'A01', '抽屉面板 A1417-41112131000095801,ABS,白', 30000, 31004, '144.35%'],
      //   ['2024091200026', 'A04', '抽屉体 A1330-40912131000092201,PPTV30,白', 5000, 1278, '25.56%'],
      //   ['2024090100128', 'D260-5', '冷冻室门把手 A1340-15512131000093207,ABS,星泽灰', 5000, 6658, '64.56%'],
      //   ['2024091100009', 'E110-2', '塑料轴 A1340-15212131000092078,POM,白色,上转轴 核价专用 COLMO品牌专用 CRBUS521-A6 RoHS', 20000, 6394, '31.97%'],
      //   ['2024091300020', 'D260-3', '大塑套0040207063,PS,海灰色', 30000, 2126, '7.09%'],
      //   ['2024091100012', 'C160-1', '出线座A0971-65312131000095092,HIPS,本', 150000, 47412, '31.61%'],
      // ]
      return {
        headerBGC: 'rgba(76,46,235,0.8)',
        oddRowBGC: 'rgba(15, 40, 80, 0.8)',
        evenRowBGC: 'rgba(15, 40, 80, 0.8)',
        align: ['center', 'center', 'center', 'center'],
        headerHeight: 40,
        index: true,
        carousel: 'page',
        waitTime: 3000,
        columnWidth: [50, 150, 80, 180, 80, 80, 180],
        // waitTime: 100000,
        rowNum: 7,
        header: [
          '<span style="font-size:14px;">工单号</span>',
          '<span style="font-size:14px;">机台</span>',
          '<span style="font-size:14px;">品名规格</span>',
          '<span style="font-size:14px;">计划产量</span>',
          '<span style="font-size:14px;">实时产量</span>',
          '<span style="font-size:14px;">完工比例</span>',
        ],
        data: this.form2.moeDetList.map((i) => {
          i[5] = `<div class="progress-bar"><div class="progress" style="width:${i[5]}"></div></div><div class="progress-number">${i[5]}</div>`
          return i
        }),
      }
    },
    optionHover() {
      return {
        step: 5, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        // singleHeight: 190, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 130, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000,
        switchDelay: 500,
      }
    },
  },
  methods: {
    creatIntvers() {
      //显示时间
      if (this.timer) clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.date = this.$moment().format()
      }, 1000)
      //30
      if (this.timer30) clearInterval(this.timer30)
      this.timer30 = setInterval(() => {
        this.get_info()
      }, 30000)
      this.get_info()
      if (this.timer3) clearInterval(this.timer3)
      this.timer3 = setInterval(() => {
        this.get_info3()
      }, 3000)
      this.get_info3()
    },
    get_info3() {
      let num = this.configNowNumber.number[0]
      num += Math.floor(Math.random() * 10)
      this.configNowNumber = fnNumber(num, '件')
    },
    get_info() {
      // baseService.getNowNumber().then((res) => {
      //   this.configNowNumber = fnNumber(res.data.productNumber, '件')
      // })
      baseService.managementAnalysis().then((res) => {
        this.form = res.data
        this.configTotalMachine = fnNumber(this.form.machineStatus.totalMachine, '台')
        if (this.form?.machineStatus?.openMachine) this.configOpenMachine = fnNumber(this.form?.machineStatus?.openMachine, '台')
      })
      baseService.monthCapacityAnalysis().then((res) => {
        this.form2 = res.data
        this.form2.moeDetList = res.data.moeDetList || []
        this.configNowNumber = fnNumber(this.form2.nowNumber, '件')
        this.configTotalNumber = fnNumber(this.form2.totalNumber, '件')
        this.form2.productionTrendAnalysis = [
          {
            name: 'h1',
            number: res.data.h1,
          },
          {
            name: 'h2',
            number: res.data.h2,
          },
          {
            name: 'h3',
            number: res.data.h3,
          },
          {
            name: 'h4',
            number: res.data.h4,
          },
        ]
      })
      baseService.salesTrendAnalysis().then((res) => {
        this.form3 = res.data
      })
      if (!this.$store.getters.isWuHan) PythonService.baseUrl = '/proxy_python_wh/'
      PythonService.getCompressor({ ErrorSilence: true })
        .then((res) => {
          this.pythonData.air.runTime = res.groupData[2].data[0].value
          this.pythonData.air.totalPower = res.groupData[3].data[8].value
          this.pythonData.air.pqyl = res.groupData[0].data[0].value
          this.pythonData.air.pqwd = res.groupData[1].data[0].value
        })
        .catch((err) => {
          console.log(err)
        })
      PythonService.getIce({ ErrorSilence: true })
        .then((res) => {
          this.pythonData.ice.runTime = res.groupData[0].data[4].value
          this.pythonData.ice.yswd = res.groupData[0].data[7].value
          this.pythonData.ice.sswd = res.groupData[0].data[8].value
          this.pythonData.ice.hsw = res.groupData[0].data[1].value
          this.pythonData.ice.csw = res.groupData[0].data[2].value
        })
        .catch((err) => {
          console.log(err)
        })
      PythonService.getHeatRecovery({ ErrorSilence: true })
        .then((res) => {
          this.pythonData.heat.runTime = res.groupData[0].data[0].value
          this.pythonData.heat.totalPower = res.groupData[2].data[3].value
          this.pythonData.heat.jyw = res.groupData[0].data[1].value
          this.pythonData.heat.cyw = res.groupData[0].data[2].value
          this.pythonData.heat.jsw = res.groupData[0].data[3].value
          this.pythonData.heat.csw = res.groupData[0].data[4].value
        })
        .catch((err) => {
          console.log(err)
        })
    },
    close() {
      this.$router.go(-1)
    },
  },
}
</script>
<style scoped lang="scss">
@import '../index.scss';
.column > div {
  margin: 8px 0px;
  overflow: hidden;
}
.jtkjl {
  border: 1px solid #1aecec52;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    color: cyan;
    font-size: 18px;
    text-align: center;
    background: #145295;
    padding: 10px 30px;
    width: 100%;
  }
}
.exp {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #ffba00;
  padding: 5px;
  span {
    margin-right: 4px;
  }
  .expbox {
    padding: 5px 12px;
    background: #134569;
    margin-left: 10px;
    width: 90px;
    text-align: center;
  }
  .title {
    white-space: pre;
    width: 105px;
  }
}
.infobox {
  color: #fff;
  font-size: 18px;
  padding-right: 5px;
  border-right: 3px solid #39ced3;
  text-align: right;
  white-space: nowrap;
  line-height: 30px;
  .number {
    font-size: 24px;
    color: orange;
  }
}
.orangebox {
  width: 160px;
  border: 2px solid #fbaa15;
  // margin: 20px 20px;
  padding: 15px;
  box-shadow: #5f6f7d 3px 3px 3px 0px;
  color: white;
  font-size: 20px;
  margin-left: 20px;
  white-space: nowrap;
  .digital-flop {
    margin-top: 10px;
    display: flex;
  }

  .unit {
    margin-left: 10px;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    padding-bottom: 5px;
  }
  .borderBox {
    color: #fbaa15;
    margin-top: 10px;
    text-align: right;
    padding-right: 14px;
    font-size: 22px;
    .orangeLabel {
      font-size: 28px;
      font-weight: 500;
      margin-right: 10px;
    }
  }
}

.bigbox {
  gap: 20px;
  display: flex;
  justify-content: space-between;
}
.seamless {
  width: 820px;
  margin: 10px 0px;
  overflow: hidden;
  img {
    width: 100px;
    height: 100px;
  }
}
.circle {
  position: relative;
}

.redBorderBox {
  border: 2px solid #a18d0c;
  -webkit-box-shadow: #5f6f7d 3px 3px 3px 0px;
  box-shadow: #5f6f7d 3px 3px 3px 0px;
  margin-right: 10px;
  color: white;
  font-size: 20px;
  text-align: center;
  width: 200px;
  padding: 5px;
}
.redBoxInfo > span:nth-child(2) {
  color: #43c8cd;
  font-size: 30px;
}
.topclass {
  color: #ec808d;
  font-size: 25px;
  margin: 5px 0px;
}
.circleBorder {
  border: 1px solid #fff;
  margin-right: 8px;
  border-radius: 100%;
  width: 22px;
  height: 22px;
  display: inline-block;
  font-size: 16px;
  text-align: center;
}
.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.boxjt {
  background: #8ab5b161;
  padding: 5px 10px;
  margin: 10px 0px 15px 0px;
  line-height: 30px;
  font-size: 20px;
  color: white;
  .title {
    font-size: 22px;
    padding: 5px;
  }
  .content {
    margin-top: 5px;
  }
}
.icons-jt {
  height: 120px;
  width: 150px;
  position: relative;
  svg {
    z-index: 999;
    position: absolute;
    top: 10px;
    left: 25px;
  }
}
.ellipse-background {
  width: 150px;
  height: 50px;
  background-color: #226cb1;
  position: absolute;
  border-radius: 50%;
  top: 70px;
}

::v-deep .dv-scroll-board {
  .progress-bar {
    background-color: #eee;
    position: relative;
    border-radius: 20px;
    height: 20px;
    margin-top: 12px;
    width: 100px;
    overflow: hidden;
    float: left;
  }

  .progress {
    width: 0%;
    height: 100%;
    border-radius: 20px;
    background-color: #47c373;
  }

  .progress-number {
    float: right;
    color: white;
  }
}
</style>
